<template>
    <view class="tab-box">
        <view class="btn-complete" @click="open">一键生成海报</view>
        <liu-poster ref="liuPoster" :width="750" :height="1300" @change="change"></liu-poster>
        <image class="success-img" :src="url" @click="previewImg(url)"></image>
    </view>
</template>

<script>
	let aa = "aa的值";
	
    export default {
		
		name: 'poster',
		
        data() {
            return {
				cc:aa,
				personalty: "你是一位成熟稳重、富有艺术感知力的生活设计师，内心追求平静与秩序，同时在成长的道路上不断探索自我，寻求精神层面的高远目标。",
                overallResult: `
				
				### part 1: 人物属性
				你是一位内心深邃、追求和谐与自由的灵魂行者，既是一位坚韧不拔的探险家，也是自己心灵港湾的守护者。
				
				### part 2: 你的优势
				你具备独立自主的个性，不受传统束缚，对生活充满热情与好奇心。在职业生涯中，你可能擅长创意设计、心理咨询或自然环境保护等领域，能够出色地处理需要深度思考、情感共鸣与创造力的工作。你善于从自然与内心世界汲取力量，使你在面对挑战时展现出非凡的韧性和生命力。
				
				### part 3: 小tips
				在你追求心灵的平静与外界的探险之间，可能存在隐藏的脆弱与对私密性的过度需求，这可能偶尔会限制你与他人建立更深层次的联系。尝试更加开放自己，允许他人走进你的世界，分享你的梦想与挑战，可能会发现新的支持与共鸣。同时，记得平衡对未知的探索与内心安宁的需求，适时的自我反思能帮助你更好地理解自己的内在动机，促进个人的全面成长。
				
				`, 
				canvasList: [{
                    type: 'color', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
                    width: 750, //宽度(rpx)
                    height: 1300, //高度(rpx)
                    x: 0, //x轴位置(离左边的距离rpx)
                    y: 0, //y轴位置(离上边的距离rpx)
                    radius: 100, //圆角(rpx)
                    lineWidth: 40, //边框宽度(rpx)
                    lineColor: '#000000', //边框颜色
                    colorObj: {
                        // colorList: ['#6900FF', '#FFFFFF'], //传入1个值为纯色，2个值为渐变色
						colorList: ['#5e5e5e', '#FFFFFF'], //传入1个值为纯色，2个值为渐变色
                        direction: 2 //渐变色绘制方向(1:从左到右;2:从上到下;3:左上角到右下角;4:右上角到左下角)
                    }, //type为color时必填
                }, {
                    type: 'image', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
                    width: 132, //宽度(rpx)
                    height: 132, //高度(rpx)
                    x: 40, //x轴位置(离左边的距离rpx)
                    y: 120, //y轴位置(离上边的距离rpx)
                    radius: 66, //圆角(rpx)
                    lineWidth: 6, //边框宽度(rpx)
                    lineColor: '#FFFFFF', //边框颜色
                    // path:'@/static/logo.png',
					path:'../../static/logo.png',
					// path: 'https://img1.baidu.com/it/u=1471990434,2209509794&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400', //图片地址(type为image时必填)
                }, {
                    type: 'text', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
                    width: 400, //文本宽度(rpx)
                    height: 40, //文本高度(rpx)
                    x: 200, //x轴位置(离左边的距离rpx)
                    y: 145, //y轴位置(离上边的距离rpx)
                    color: '#FFFFFF', //文本颜色
                    fontSize: 36, //文字大小(rpx)
                    lineHeight: 36, //文字行高(rpx)
                    bold: true, //文字是否加粗
                    content: '房树人测试', //文本内容(type为text时必填)
                }, {
                    type: 'text', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
                    width: 400, //文本宽度(rpx)
                    height: 40, //文本高度(rpx)
                    x: 200, //x轴位置(离左边的距离rpx)
                    y: 195, //y轴位置(离上边的距离rpx)
                    color: '#FFFFFF', //文本颜色
                    fontSize: 28, //文字大小(rpx)
                    lineHeight: 28, //文字行高(rpx)
                    bold: false, //文字是否加粗
                    content: '揭秘你的深层潜意识', //文本内容(type为text时必填)
                }, {
                    type: 'image', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
                    width: 670, //宽度(rpx)
                    height: 670, //高度(rpx)
                    x: 40, //x轴位置(离左边的距离rpx)
                    y: 300, //y轴位置(离上边的距离rpx)
                    radius: 20, //圆角(rpx)
                    lineWidth: 12, //边框宽度(rpx)
                    lineColor: '#FFFFFF', //边框颜色
                    
					path:'../../static/htp.jfif',
					// path: 'https://img1.baidu.com/it/u=1471990434,2209509794&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400', //图片地址(type为image时必填)
                    childs: [{
                        type: 'text', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
                        width: 400, //文本宽度(rpx)
                        height: 40, //文本高度(rpx)
                        x: 100, //x轴位置(离左边的距离rpx)
                        y: 400, //y轴位置(离上边的距离rpx)
                        color: '#FFFFFF', //文本颜色
                        fontSize: 36, //文字大小(rpx)
                        lineHeight: 36, //文字行高(rpx)
                        bold: true, //文字是否加粗
                        content: '', //文本内容(type为text时必填)
                    }]
                }, {
                    type: 'line', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
                    width: 4, //线条宽度(rpx)
                    color: '#FFFFFF', //线条颜色
                    startX: 20, //起点x轴位置(离左边的距离rpx)
                    startY: 270, //起点y轴位置(离上边的距离rpx)
                    endX: 730, //终点x轴位置(离左边的距离rpx)
                    endY: 270, //终点y轴位置(离上边的距离rpx)
                    lineType: 'dash', //线条类型(solid:实线;dash:虚线)
                }, {
                    type: 'line', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
                    width: 4, //线条宽度(rpx)
                    color: '#FFFFFF', //线条颜色
                    startX: 20, //起点x轴位置(离左边的距离rpx)
                    startY: 1000, //起点y轴位置(离上边的距离rpx)
                    endX: 730, //终点x轴位置(离左边的距离rpx)
                    endY: 1000, //终点y轴位置(离上边的距离rpx)
                    lineType: 'dash', //线条类型(solid:实线;dash:虚线)
                }, {
                    type: 'text', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
                    width: 500, //文本宽度(rpx)
                    height: 200, //文本高度(rpx)
                    x: 40, //x轴位置(离左边的距离rpx)
                    y: 1050, //y轴位置(离上边的距离rpx)
                    // color: '#9043FD', //文本颜色
					color: '#000000', //文本颜色
                    fontSize: 32, //文字大小(rpx)
                    lineHeight: 45, //文字行高(rpx)
                    bold: true, //文字是否加粗
                    content: '', //文本内容(type为text时必填)
                }
				, {
                    type: 'image', //绘制类型(color:背景色;image:图片;text:文字;line:线条),
                    width: 150, //宽度(rpx)
                    height: 150, //高度(rpx)
                    x: 550, //x轴位置(离左边的距离rpx)
                    y: 1050, //y轴位置(离上边的距离rpx)
                    radius: 4, //圆角(rpx)
                    lineWidth: 6, //边框宽度(rpx)
                    lineColor: '#FFFFFF', //边框颜色
                    path:'../../static/QRCode/white.png',
					// path: 'https://img1.baidu.com/it/u=1471990434,2209509794&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400', //图片地址(type为image时必填)
                }
				
				],
                url: '',
            };
        },
		onLoad() {
			
			this.canvasList[7].content = this.getPersonAttribute();
			console.log(this.canvasList[7]);
		
		},
		// computed:{
		// 	attribute() {
		// 		return this.personalty.split(',').reverse().join('!');
		// 		// return this.personalty;
				
		// 	}
		// },
        methods: {
            //开始绘制
            open() {
                this.$nextTick(() => {
                    this.$refs.liuPoster.init(this.canvasList)
                })
            },
            //绘制成功返回生成的海报图片地址
            change(e) {
                this.url = e
            },
			getPersonAttribute() {
				const text = this.overallResult;
				
				// 使用正则表达式匹配"### part 1: 人物属性"和"### part 2:"之间的内容
				const regex = /### part 1: 人物属性([\s\S]*?)### part 2:/;
				const match = text.match(regex);
				
				if (match && match[1]) {
				  // match[1] 包含了匹配的组，即所需的文本
				  const extractedText = match[1].trim();
				  console.log(extractedText);
				  return extractedText;
				} else {
				  console.log("没有找到匹配的内容");
				}
			},
            //预览生成的海报图片
            previewImg(url) {
                if (!url) return
				
                uni.previewImage({
                    urls: [url]
                })
            }
        }
    };
</script>

<style lang="scss" scoped>
    .tab-box {
        width: 100%;
        height: 100vh;
        box-sizing: border-box;
        background-color: #f0f0f0;
        padding-top: 20rpx;

        .btn-reset {
            width: 100%;
            height: 72rpx;
            background: #FFFFFF;
            border-radius: 40rpx;
            border: 2rpx solid #FD430E;
            font-size: 30rpx;
            color: #3E3E3E;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .btn-complete {
            width: 98%;
            height: 76rpx;
            border-radius: 40rpx;
            font-size: 30rpx;
            color: #FFFFFF;
            background-color: #FD430E;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
        }


        .success-img {
            width: 100%;
            height: 1300rpx;
            margin-top: 20rpx;
        }
    }
</style>